<!DOCTYPE html>
<html>
<head>
    <title>Bot脚本管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">

    <style>
        body { font-family: Arial, sans-serif; margin: 20px; max-width: 900px;margin: 0 auto;padding: 0 10px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f2f2f2; }
        .status-running { color: green; }
        .status-stopped { color: red; }
        .action-btn { padding: 5px 10px; margin: 0 2px; cursor: pointer; }
        .flex{display:flex}
        .f1{flex:1}
        .f2{flex:2}
        .log-container {
            background-color: #f5f5f5;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow-x: auto;
            font-size: 14px;
            margin-top: 5px;
            white-space: nowrap; 
        }
        .flex.fl{justify-content:flex-start}
        .flex.fr{justify-content:flex-end}
        .flex.flr{justify-content:space-between}
        .flex.flr2{justify-content:space-around}
        .flex.flr3{justify-content:center}
        .flex.ft{align-items:flex-start}
        .flex.fb{align-items:flex-end}
        .flex.ftb{align-items:center}
        .flex.ftb2{align-items:stretch;}

        .flex.fdc{flex-direction:column}
        .flex.fdr{flex-direction:row}
        .flex.fww{flex-wrap: wrap;}
        .interval{
            background-color: bisque;
            border-radius: 5px;
            padding: 2px 10px;
            margin-left: 10px;
        }
        .scriptItem{
            margin-bottom: 20px;
            
        }
        a{
            color: #080808;
            text-decoration: none; 
        }
    </style>
</head>
<body>
    <div class="">
        <h3>脚本管理器</h3>
        <div id="msgBox"></div>
    </div>

    <div class="scriptBox">

        {% for script in scripts %}
        <div class="scriptItem flex fdc">
            <div class="flex flr" style="margin-bottom: 10px;">
                <div class="flex fl">
                   <div> {{ script.title }}</div>
                    <div class="interval">{{ script.interval }}分钟</div>
                </div>
                {% if script.status == 'running' %}
                    <div class="status-{{ script.status }}" onclick="controlScript('stop', '{{ script.name }}')">{{ script.status }}</div>
                {% else %}
                    <div class="status-{{ script.status }}" onclick="controlScript('start', '{{ script.name }}')">{{ script.status }}</div>
                {% endif %}
            </div>
            <div class="flex flr">
                <div>{{ script.name }}</div>
                <div>
                    <a href="/logs/{{ script.name }}">日志</a> |
                    <a href="javascript:clear_script('{{script.name}}')">清空</a>
                </div>
            </div>
            <div class="log-container">{% for log in script.latest_log %}
                <div>{{ log }}</div>
{% endfor %}</div>
        </div>
        {% endfor %}

    </div>
 
    <script>
        function clear_script(scriptPath){
            fetch(`/clear_script?script_path=${encodeURIComponent(scriptPath)}`)
                .then(response => response.text())
                .then(data => {
                    showMsg(data,()=>{
                        location.reload();  // 刷新页面以更新状态
                    });
                    
                })
                .catch(error => console.error('Error:', error));
        }

        function controlScript(action, scriptPath) {
            fetch(`/${action}_script?script_path=${encodeURIComponent(scriptPath)}`)
                .then(response => response.text())
                .then(data => {
                    showMsg(data,()=>{
                        location.reload();  // 刷新页面以更新状态
                    });
                })
                .catch(error => console.error('Error:', error));
        }

        function showMsg(msg,fn){
            document.getElementById("msgBox").innerHTML =msg;
            setTimeout(()=>{
                document.getElementById("msgBox").innerHTML ='';
                fn && fn()
            },2000)
        }

        setTimeout(()=>{
            location.reload()
        },10000)
    </script>
</body>
</html>